<template>
	<view class="fenxiao_box">
		<view class="fenxiao_box_top">
			<view class="member_info">
				<view class="cover">
					<!-- http://woyinshua-order-img.gida.cn//icon/avatar/1.jpg -->
					<u-avatar :src="indexData.avatar" :size="120"></u-avatar>
				</view>
				<view class="nickname">
					<view class="">
						{{ indexData.nickname }}
					</view>
					<view class="">
						推荐人：{{ indexData.referrer }}
					</view>
				</view>
				<view class="qrcode">
					<u-icon name="erweima" custom-prefix="g-icon" size="48" @click="gotoPromoteCode"></u-icon>
				</view>
			</view>
			<view class="money_info">
				<view class="index-money-item">
					<view class="">
						{{ (indexData.grand_total / 100).toFixed(2) }}
					</view>
					<view class="">
						累计佣金 (元)
					</view>
				</view>
				<view class="xian"></view>
				<view class="index-money-item">
					<view class="">
						{{ (indexData.total_withdraw / 100).toFixed(2) }}
					</view>
					<view class="">
						累计提现 (元)
					</view>
				</view>
				<view class="xian"></view>
				<view class="index-money-item">
					<view class="">
						{{ (indexData.frozen_withdraw / 100).toFixed(2) }}
					</view>
					<view class="">
						提现中（元）
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="top">
				<view class="total_commission">
					<view class="price">
						{{ (indexData.available_withdraw / 100).toFixed(2) }}
					</view>
					<view class="">
						可提现（元）
					</view>
				</view>
				<view class="btn">
					<u-button size="mini" shape="circle" type="error" @click="gotoWithdrawApply">申请提现</u-button>
				</view>
			</view>
			<view class="allmoney-xian"></view>
			<view class="money_info">
				<view class="index-money-item">
					<view class="price">
						{{ (indexData.today_money / 100).toFixed(2) }}
					</view>
					<view class="">
						今日收入 (元)
					</view>
				</view>
				<view class="index-money-item">
					<view class="price">
						{{ (indexData.progress_money / 100).toFixed(2) }}
					</view>
					<view class="">
						进行中 (元)
					</view>
				</view>
				<view class="index-money-item">
					<view class="price">
						{{ (indexData.total_order_money / 100).toFixed(2) }}
					</view>
					<view class="">
						总销售额 (元)
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="top" @click="gotoTeamList">
				<view class="total_commission">
					<u-icon name="tuandui" custom-prefix="g-icon" :size="46" style="margin-right: 10rpx;"></u-icon>
					我的团队
				</view>
				<view class="btn">
					{{ indexData.team_num }} 人
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="box">
			<u-grid :col="3">
				<!-- <u-grid-item @click="gotoWithdrawApply">
					<u-icon name="tixian" custom-prefix="g-icon" :size="46"></u-icon>
					<view class="grid-text">提现</view>
				</u-grid-item> -->
				<u-grid-item @click="gotoWithdrawList">
					<u-icon name="bokuanmingxi" custom-prefix="g-icon" :size="46"></u-icon>
					<view class="grid-text">提现明细</view>
				</u-grid-item>
				<u-grid-item @click="gotoOrderList">
					<u-icon name="quanbudingdan" custom-prefix="g-icon" :size="46"></u-icon>
					<view class="grid-text">分销订单</view>
				</u-grid-item>
				<u-grid-item @click="gotoPromoteCode">
					<u-icon name="erweima" custom-prefix="g-icon" :size="46"></u-icon>
					<view class="grid-text">推广海报</view>
				</u-grid-item>
				<u-grid-item @click="gotoGoodsList">
					<u-icon name="shangpin" custom-prefix="g-icon" :size="46"></u-icon>
					<view class="grid-text">分销商品</view>
				</u-grid-item>
				<u-grid-item @click="gotoFollowList">
					<u-icon name="star-fill" :size="46"></u-icon>
					<view class="grid-text">收藏商品</view>
				</u-grid-item>
				<u-grid-item @click="gotoBill">
					<u-icon name="zhangdan" custom-prefix="g-icon" :size="46"></u-icon>
					<view class="grid-text">账单</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexData: {}
			}
		},
		onShow() {
			this.getIndexData()
		},
		methods:{
			getIndexData(){
				this.$api.fenxiao.index().then(res => {
					this.indexData = res
				}).catch(err => {
					
					this.$u.toast(err.message)
				})
			},
			gotoWithdrawApply(){
				this.$myRouter.push({
					name: 'fenxiao/withdraw_apply'
				})
			},
			gotoWithdrawList(){
				this.$myRouter.push({
					name: 'fenxiao/withdraw_list'
				})
			},
			gotoOrderList(){
				this.$myRouter.push({
					name: 'fenxiao/order_list'
				})
			},
			gotoPromoteCode(){
				this.$myRouter.push({
					name: 'fenxiao/promote_code'
				})
			},
			gotoGoodsList(){
				this.$myRouter.push({
					name: 'fenxiao/goods_list'
				})
			},
			gotoFollowList(){
				this.$myRouter.push({
					name: 'fenxiao/follow_list'
				})
			},
			gotoBill(){
				this.$myRouter.push({
					name: 'fenxiao/bill'
				})
			},
			gotoTeamList(){
				this.$myRouter.push({
					name: 'fenxiao/team_list'
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.money_info{
		display: flex;
		justify-content: center;
		align-items: center;
		
		.index-money-item{
			padding: 40rpx 0;
			flex: 1;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			text-align: center;
		}
	}
	.xian{
		height: 40rpx;
		border: 1px solid hsla(0,0%,100%,.5);
	}
	.fenxiao_box_top{
		background-color:#ff4544;
		color: #FFF;
		
		.member_info{
			display: flex;
			padding: 40rpx 30rpx 0 30rpx;
			
			.nickname{
				width: 500rpx;
				margin-left: 10rpx;
				margin-top: 10rpx;
			}
			
			.qrcode{
				padding-top: 20rpx;
			}
		}
		
	}
	.box{
		background-color: #FFF;
		margin: 30rpx;
		
		.top{
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.price{
			color: #ff4544;
		}
		.allmoney-xian{
			width: 100%;
			border-top: 1px solid #eee;
		}
	}
</style>
